import { computed, defineComponent, onMounted, reactive, ref } from "vue";
import classes from "./index.module.scss"
import { useEmiter } from "@/hooks/useEmiter";
import { useTable } from "@/hooks/useTable";
import { WorkArea } from "@/components/WorkArea";
import Table, { GridType } from "@/components/Table";
import { ConditionItemType, ToolsItemType } from "@/hooks/useElementFormItem";
import { onEnterKeydown } from "@/hoc/onEnterDown";
import apiStore from "@/stores/apiStore";
import { useElMessageBox } from "@Tea/utils";
import { FN, UserListReturnType } from "@Tea/model";
import { httpCommonHandle } from "@/utils/httpUtils";
import { MenuPowerDialog } from "./module/menuPower-dialog";

const currentName = "memberList"
export default defineComponent({
  name: currentName,
  setup(props, ctx) {
    const { tableName } = useEmiter(currentName)
    const { mountSearch, assginPaging, tableLoading, commonSearch, handleOneRow } = useTable(tableName)
    const { memberPageList, downgradeAuthority } = apiStore().api

    // 当前选择的成员
    const curMember = ref<UserListReturnType>({} as UserListReturnType)
    // 改变菜单权限的弹框
    const menuPowerVisible = ref(false)

    // 搜索条件
    const searchForm = reactive({
      username: "",
      enable: 1
    })

    /**
     * @use 权限升级 
     */
    const downgrade = () => {
      handleOneRow<UserListReturnType>((data) => {
        useElMessageBox({
          content: `确定要将 ${data.username} 降级为普通成员吗？`,
          thenCallback: () => {
            httpCommonHandle({
              loading: tableLoading,
              callBack:() => downgradeAuthority (data.userId),
              onSuccess: searchData
            })
          }
        })
      })
    }

    /**
     * @use 菜单权限
     */
    const meunPower = () => {
      handleOneRow<UserListReturnType>((data) => { 
        curMember.value = data
        menuPowerVisible.value = true
      })
    }

    /**
     * @use 查询
     */
    const searchData = async () => {
      commonSearch(memberPageList(assginPaging(searchForm)))
    }
    
    // 创建工具的配置
    const toolsList: ToolsItemType<typeof searchForm>[] = [
      {
        type: "button",
        content: "权限降级",
        attr: {
          onClick: downgrade
        }
      },
      {
        type: "button",
        content: "菜单权限",
        attr: {
          onClick: meunPower
        }
      }
    ]

    // 创建搜索条件的配置
    const condition: ConditionItemType<typeof searchForm>[] = [
      {
        type: "text",
        vModel: searchForm,
        feild: "username",
        label: "用户名称",
        col: 4,
        attr: {
          placeholder: "用户名称",
          onClear: searchData,
          onKeydown:(e:KeyboardEvent) => onEnterKeydown(e, searchData)
        }
      },
    ]

    // agGrid 配置项
    const gridAttr: GridType = {
      columnDefs: [
        { headerName: "用户ID", checkboxSelection: true, field: "userId", width: 100 },
        { headerName: "用户名称", field: "username", width: 100 },
        { headerName: "用户账号", field: "account", width: 150 },
        { headerName: "用户头像", field: "avator", width: 100 },
      ],
      rowSelection: "single"
    }

    // 生命周期
    onMounted(() => {
      mountSearch(searchData)
      searchData()
    })

    return () => (
      <section class={`${classes.userList} m-padding m-fullBox m-window`}>
        {menuPowerVisible.value && <MenuPowerDialog
          curMember={curMember}
          visible={menuPowerVisible}
          /
        >}
        <WorkArea
          tools={toolsList}
          condition={condition}
          onSearch={searchData}
        >
        </WorkArea>
        <Table
          v-loading={tableLoading.value}
          gridAttr={gridAttr}
          tableName={tableName}
        ></Table>
      </section>
    )
  },
})